<template>
    <div class="wpwork-preview-main user-form">
      <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="起始时间：">
              <el-date-picker v-model="listQuery.startDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截止时间：">
              <el-date-picker v-model="listQuery.endDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注：">
              <el-input v-model="listQuery.remark"  placeholder="请输入备注"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件类别：">
              <el-select v-model="listQuery.eventType" clearable placeholder="--请选择事件类别--">
                <el-option label="类别1" value="1"></el-option>
                <el-option label="类别2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="终端号码：">
              <el-input v-model="listQuery.terminalNumber"   placeholder="请输入终端号码"
                        clearable @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="所属群组：">
              <el-select v-model="listQuery.groupId" clearable placeholder="--请选择所属群组--">
                <el-option label="群组1" :value="1"></el-option>
                <el-option label="群组2" :value="2"></el-option>
                <el-option label="群组3" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="资源类别：">
              <el-select v-model="listQuery.resourceType" clearable placeholder="--请选择资源类别--">
                <el-option label="图片" :value="1"></el-option>
                <el-option label="文字" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">
                {{$t('common.search')}}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
        <wpwork-table v-loading="listLoading" :data="tableData" :hasNO="false">
          <el-table-column prop="realName" label="人员名称" width="100" align="center"/>
          <el-table-column prop="mobilePhone" label="终端号码" width="100" />
          <el-table-column prop="photoTime" label="拍照时间" :formatter="wpwork.tableDateFormat"
            width="140" />
            <el-table-column prop="uploadTime" label="上传时间" :formatter="wpwork.tableDateFormat"
            width="140" />
          <el-table-column prop="resourceType" label="资源类别" width="120" align="center" />
          <el-table-column prop="eventType" label="事件类别" width="120" />
          <el-table-column prop="position" label="位置描述" min-width="180" show-overflow-tooltip   />
          <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip  />
          <el-table-column label="操作" width="280">
            <template slot-scope="scope" v-if="!scope.row.isAdministrator">
              <el-button size="mini" type="text"  @click="resourceHandle(scope.row)">
                资源
              </el-button>
              <el-button size="mini" type="text" @click="position(scope.row.id)">
                定位
              </el-button>
              <el-button size="mini" type="text" @click="updateHandle(scope.row)">
                修改
              </el-button>
              <el-button size="mini" type="text" @click="handleDel(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </wpwork-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
      <resource-dialog ref="resourceDialog"></resource-dialog>
      <edit-dialog 
      :visible.sync="editDialogVisible"
      :form-data="currentEditItem"
      @submit="handleEditSubmit"/>
    </div>
</template>
<script>
import ResourceDialog from './resource.vue'
import EditDialog from './EditDialog.vue'
export default {
  name: 'event',
  components: {
    ResourceDialog,
    EditDialog
  },
  data() {
    return {
      tableData: [],
      editDialogVisible: false,
      currentEditItem: null,
      listLoading: true,
      listQuery: {
        organizeId: '',
        keyword: '',
        gender: '',
        enabledMark: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 2,
    }
  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    initData() {
      this.listLoading = true
      this.tableData = [
        {
          "id": "1",
          "realName": "测试人员1",
          "mobilePhone":"13136599927",
          "photoTime":1755500342000,
          "uploadTime":1755500382000,
          "resourceType":"图片",
          "eventType":"事件1",
          "position":"中国湖北省武汉市武昌区",
          "remark":"这是一个备注1,这是一个备注1,这是一个备注1,这是一个备注1这是一个备注1,这是一个备注1,这是一个备注1，这是一个备注1，这是一个备注1。",
          "imageUrls": [
            require('@/assets/images/t1.png'),
            // require('@/assets/images/t2.png'),
            // require('@/assets/images/t3.png'),
            // require('@/assets/images/t4.png')
          ]
        },
        {
          "id": "2",
          "realName": "测试人员2",
          "mobilePhone":"19135293352",
          "photoTime":1755572342000,
          "uploadTime":1755572482000,
          "resourceType":"图片",
          "eventType":"事件2",
          "position":"中国湖北省武汉市汉口区",
          "remark":"这是一个备注2,这是一个备注2,这是一个备注2,这是一个备注21这是一个备注2,这是一个备注1,这是一个备注2，这是一个备注1，这是一个备注2。",
          "imageUrls": [
            require('@/assets/images/t3.png'),
            // require('@/assets/images/t4.png')
          ]
        },
      ]
      setTimeout(() => {
          this.listLoading = false
       }, 600)
    },
    resourceHandle(row){
      this.$refs.resourceDialog.openDialog({
        imageUrls: row.imageUrls,
        remark: row.remark
      });
    },
   updateHandle(row) {
      console.log(row);
      this.currentEditItem = JSON.parse(JSON.stringify(row));
      console.log(this.currentEditItem);
      
      this.editDialogVisible = true;
    },
    handleDel(id) {
      this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
       this.initData()
      }).catch(() => { })
    },
    handleEditSubmit(updatedData) {
      const index = this.tableData.findIndex(item => item.id === updatedData.id);
      if (index !== -1) {
        this.$set(this.tableData, index, updatedData);
        this.$message.success('修改成功！');
      }
      this.editDialogVisible = false;
    },
    openResourceDialog(row) {
      console.log('log1111:', row);
    },
    reset() {
      this.listQuery.startDate = ''
      this.listQuery.endDate = ''
      this.listQuery.remark = ''
      this.listQuery.eventType = ''
      this.listQuery.groupId = ''
      this.listQuery.terminalNumber = ''
      this.listQuery.resourceType = ''
      this.initData()
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form{
  margin-top: 65px;
  height: 92%;
}
@media (max-width: 1268px) { 
  .user-form {
      margin-top: 98px;

  }
}
@media (max-width: 768px) { 
  .user-form {
      margin-top: 168px;

  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>